<template>
	<view class="page">
		<view
			class="flex flex-direction flex-wrap align-stretch justify-center benben-position-layout flex changePassword_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between changePassword_fd0_0'>
				<view class='flex flex-wrap align-center changePassword_fd0_0_c0' @tap.stop="handleJumpDiy"
					data-type="back" data-url="1">
					<text class='fu-iconfont2  testExamination_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<text class='changePassword_fd0_0_c1'>特惠长租</text>
				<view class='flex align-center justify-end changePassword_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		
		<view class="remind">
			<image class="remind_img" :src='STATIC_URL+"257.png"'></image>
			<view class="remind_text">专业解决方案 全面保障 品质服务 优惠价格</view>
		</view>
		<view class="content_form" :class="form_type == 1 ? 'bg_1' : 'bg_2'">
			<view class="tabs">
				<view class="tabs_item" @tap.stop="select(1)">
					<view class="item_text" :class="form_type == 1 ? 'item_active' : ''">个人长租</view>
					<image :class="form_type == 2 ? 'item_icon' : ''" :src='STATIC_URL+"259.png"'></image>
				</view>
				<view class="tabs_item" @tap.stop="select(2)">
					<view class="item_text" :class="form_type == 2 ? 'item_active' : ''">企业长租</view>
					<image :class="form_type == 1 ? 'item_icon' : ''" :src='STATIC_URL+"259.png"'></image>
				</view>
			</view>
			<view style="background: #fff;padding: 0 32rpx 48rpx;border-radius:32rpx;">
				<view class='flex flex-wrap align-center justify-between personalInformation_fd1_0' v-if="form_type == 2">
					<text class='personalInformation_fd1_0_c0'>公司名称</text>
					<input class='flex-sub personalInformation_fd1_1_c1' type="text" placeholder="请输入公司名称" confirm-type="done"
						:maxlength="14" placeholder-style="color:rgba(102, 102, 102, 1);font-size:30rpx"
						v-model="name" />
				</view>
				<view class='flex flex-wrap align-center justify-between personalInformation_fd1_0'>
					<text class='personalInformation_fd1_0_c0'>联系人</text>
					<input class='flex-sub personalInformation_fd1_1_c1' type="text" placeholder="请输入姓名" confirm-type="done"
						:maxlength="14" placeholder-style="color:rgba(102, 102, 102, 1);font-size:30rpx"
						v-model="name" />
				</view>
				<view class='flex flex-wrap align-center justify-between personalInformation_fd1_0'>
					<text class='personalInformation_fd1_0_c0'>联系电话</text>
					<input class='flex-sub personalInformation_fd1_1_c1' type="text" placeholder="请输入联系电话" confirm-type="done"
						:maxlength="14" placeholder-style="color:rgba(102, 102, 102, 1);font-size:30rpx"
						v-model="name" />
				</view>
				<view class='flex flex-wrap align-center justify-between personalInformation_fd1_0'>
					<text class='personalInformation_fd1_0_c0'>车辆类型</text>
					<input class='flex-sub personalInformation_fd1_1_c1' type="text" placeholder="请选择" confirm-type="done"
						:maxlength="14" placeholder-style="color:rgba(102, 102, 102, 1);font-size:30rpx"
						v-model="name" />
					<image class="right_icon" :src='STATIC_URL+"208.png"' mode="aspectFill"></image>
				</view>
				<view class='flex flex-wrap align-center justify-between personalInformation_fd1_0'>
					<text class='personalInformation_fd1_0_c0'>租车周期</text>
					<input class='flex-sub personalInformation_fd1_1_c1' type="text" placeholder="请选择" confirm-type="done"
						:maxlength="14" placeholder-style="color:rgba(102, 102, 102, 1);font-size:30rpx"
						v-model="name" />
					<image class="right_icon" :src='STATIC_URL+"208.png"' mode="aspectFill"></image>
				</view>
				<view class="other_text">其他要求</view>
				<view class='flex flex-wrap feedback_fd2_1'>
					<textarea class='flex feedback_input_fd2_1' confirm-type="done" :placeholder="'请输入内容'"
						:maxlength="200" placeholder-style="color:rgba(191, 191, 191, 1);font-size:26rpx" v-model="name" />
					<text class="feedback_num">{{name.length}}/200</text>
							
				</view>
				<view class="form_tip">
					提交后客户经理会与您联系
					为您定制长租解决方案，提供最优质的服务和最优惠的价格
				</view>
			</view>
		</view>
		
		<view class="flex align-center justify-between feedback_flex_4">
			<view class='feedback_fd4_0'>下一步</view>
		</view>
		<view style="height: 130rpx;"></view>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		components: {},

		data() {
			return {
				"fd3_0": "mobile",
				"code": "",
				"name": "",
				"phone": '135******25',
				"form_type": 1
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			console.log(this.userInfo);
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			select(type) {
				this.form_type = type;
			},
			//跳转
			getjump() {
				
			}
		}
	};
</script>
<style lang="scss" scoped>
	.remind {
		text-align: center;
		margin: 16rpx 0 34rpx;
		.remind_img {
			width: 430rpx;
			height: 56rpx;
			margin-bottom: 14rpx;
		}
		.remind_text {
			font-weight: 400;
			font-size: 26rpx;
			color: #FFFFFF;
		}
	}
	.content_form {
		background: #fff;
		border-radius: 32rpx;
		margin: 0 30rpx;
		overflow: hidden;
	}
	.bg_1 {
		background: url(https://speed.zhongchuxing.com/dyimages/258.png) no-repeat;
		background-size: 100% auto;
	}
	.bg_2 {
		background: url(https://speed.zhongchuxing.com/dyimages/260.png) no-repeat;
		background-size: 100% auto;
	}
	.tabs {
		display: flex;
		align-items: center;
		padding: 22rpx 0;
		.tabs_item {
			flex: 0.5;
			display: flex;
			flex-direction: column;
			align-items: center;
			.item_text {
				font-weight: bold;
				font-size: 30rpx;
				color: #fff;
			}
			.item_active {
				color: #FC5B03;
			}
			image {
				width: 46rpx;
				height: 12rpx;
			}
			.item_icon {
				opacity: 0;
			}
		}
	}
	.other_text {
		font-weight: 500;
		font-size: 30rpx;
		color: #111111;
		padding: 32rpx 0;
	}
	.form_tip {
		font-weight: 400;
		font-size: 22rpx;
		color: #999999;
		line-height: 32rpx;
		padding: 22rpx 0 0;
		
	}
	.feedback_num {
		font-weight: 500;
		font-size: 26rpx;
		color: rgba(23,19,19,0.4);
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
	}
	.feedback_fd2_1 {
		background: #F7F7F7;
		border-radius: 8rpx;
		font-size: 26rpx;
		position: relative;
	}
	
	.feedback_input_fd2_1 {
		padding: 20rpx 20rpx 60rpx 20rpx;
		width: 100%;
		height: 240rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #333;
	}
	.changePassword_fd3_1 {
		background: #FC5B03;
		border-radius: 80rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		margin: 64rpx auto 0;
		height: 84rpx;
		line-height: 84rpx;
		width: 640rpx;
	}
	
	.feedback_fd4_0 {
		width: 640rpx;
		border-radius: 80rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		margin: 0rpx 32rpx 0rpx 32rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		background: #FC5B03;
	}
	
	.feedback_flex_4 {
		width: 750rpx;
		height: 120rpx;
		overflow: hidden;
		position: fixed;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		display: flex;
		justify-content: center;
		background: #fff;
	}
	.personalInformation_fd1_0 {
		padding: 32rpx 0;
		border-bottom: 2rpx solid #eee;
	}
	
	.personalInformation_fd1_0_c0 {
		font-size: 30rpx;
		font-weight: 500;
		color: #111;
	}
	
	.personalInformation_fd1_0_c1_image {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}
	.personalInformation_fd1_1_c1 {
		font-size: 30rpx;
		font-weight: 500;
		color: #111;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}
	.right_icon {
		width: 28rpx;
		height: 28rpx;
	}
	
	

	.changePassword_flex_3 {
		margin: 40rpx 0rpx 0rpx 0rpx;
	}

	.changePassword_flex_password_active_2 {
		border: 1px solid rgba(217, 217, 217, 1);
		width: 101rpx;
		height: 86rpx;
	}

	.changePassword_flex_password_noActive_2 {
		border: 1px solid rgba(217, 217, 217, 1);
		width: 101rpx;
		height: 86rpx;
	}

	.changePassword_fd1_0 {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
	}

	.changePassword_fd1_1 {
		margin: 55rpx 0rpx 72rpx 0rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.changePassword_flex_1 {
		padding: 103rpx 0rpx 0rpx 0rpx;
	}

	.changePassword_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.changePassword_fd0_0_c0 {
		width: 40rpx;
		height: 40rpx;
	}

	.changePassword_fd0_0_c0_c0 {
		width: 18rpx;
		height: 32rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.testExamination_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
	}

	.changePassword_fd0_0_c1 {
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
	}

	.changePassword_fd0_0_c2 {
		width: 40rpx;
		height: 40rpx;
	}

	.changePassword_flex_0 {
		background: url(https://speed.zhongchuxing.com/dyimages/256.png) no-repeat;
		// border-bottom: 1px solid #eee;
		background-size: 100% !important;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.page {
		min-height: calc(100vh - var(--window-bottom));
		background: #f6f7fb;
		background-size: 100% auto !important;
		background: url(https://speed.zhongchuxing.com/dyimages/256.png) no-repeat;
	}
</style>
